<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        table{
            border-collapse: collapse;
            text-align: center;
            width: 300px;
            height: 100px
        }
        td{
            border: 1px solid black;
        }
        tr{
            border: 1px solid black;
        }
    </style>
   
</head>
<body>
    <div class="container">
        <table id="table">
            <tr>
                <th id="bookName">书名</th>
                <th id="priceTitle">价格</th>
            </tr>
            <tr class="book-row">
                <td>网页工程实训</td>
                <td class="price">30.00</td>
            </tr>
            <tr class="book-row">
                <td>C语言工程实训</td>
                <td class="price">30.00</td>
            </tr>
        </table>
        <button id="addRow">增加一行</button>
        <button id="deleteRow">删除最后一行</button>
        <button id="changeTitle">修改标题</button>
    </div>
</body>
 <script>
var tableDom=document.querySelector("table");
var titleDom=document.querySelectorAll("caption");

var buttonDomChange=document.querySelector(".changeTitle");
var buttonDomAdd=document.querySelector(".addRow");
var buttonDomDelete=document.querySelector(".deleteRow");

buttonDomChange.onclick=function(){
    buttonDomChange.innerHTML="书的价格";
};


buttonDomAdd.onclick=function(){
    var  newRow=document.createElement("tr");
    newRow.innerHTML="<td>HTML5</td><td>30.00</td>";
    tableDom.appendChild(newRow);
}

buttonDomDelete.onclick=function(){
    var secondDom=document.querySelectorAll("table tr:nth-child(2)");
    if(lastRow==titleDom){
        alert("至少保留一行标题行");
    }else{
        tableDom.removeChild(lastRow);
    }
}


        // document.addEventListener('DOMContentLoaded', function() {
        //     var table = document.getElementById("table");
        //     var bookName = document.getElementById("bookName");
        //     var priceTitle = document.getElementById("priceTitle");

        //     // 增加一行
        //     document.getElementById("addRow").onclick = function() {
        //         var newRow = table.insertRow(-1);
        //         newRow.className = "book-row";
        //         var newCell1 = newRow.insertCell(0);
        //         var newCell2 = newRow.insertCell(1);
        //         newCell2.className = "price";
        //         newCell1.innerHTML = "HTML5";
        //         newCell2.innerHTML = "30.00";
        //     };

        //     // 删除最后一行（保留标题行）
        //     document.getElementById("deleteRow").onclick = function() {
        //         // 确保至少保留一行标题行
        //         if (table.rows.length > 1) {
        //             table.deleteRow(table.rows.length - 1);
        //         } else {
        //             alert("至少保留一行标题行");
        //         }
        //     };

        //     // 修改标题
        //     document.getElementById("changeTitle").onclick = function() {
        //         bookName.innerHTML = "书名";
        //         priceTitle.innerHTML = "价格";
        //     };
        // });
    </script>
</html>